<template>
    <div :class="`tech-product-info-column ${mode} ${styleMode}`">
        <div class="info-column-title title-color">{{title}}{{maxCount ? `(最多${maxCount}项)` : ''}}</div>
        <div class="info-column-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import ModeMixin from '@common/mixin';
export default {
    name: 'ProductInfoColumn', // 菜品选择详情项
    mixins: [ModeMixin],
    props: {
        title: {
            type: String,
            default: '',
        },
        maxCount: {
            type: [Boolean, Number],
            default: false,
        },
    },
};
</script>

<style lang="less">
.tech-product-info-column {
    position: relative;
    .m-t(@gap-md);
    .mode-white();
    .info-column-title {
        color: @text-color;
        font-weight: 500;
        .font-size-md();
    }
    .info-column-content {
        width: 100%;
        .clearfix();
    }
}
</style>
